<template>
  <div id="app">
    <div class="a-topBar">
      <div class="a-logo">
        <img id="ico" alt="icon" src="@/assets/logo-min.png">
      </div>
      <div class="a-links">
        <div class="a-block">
          <div class="a-home">
            <router-link class="s-font-nav_item s-nav-text" to="/"><i class="el-icon-s-home"></i>网站主页</router-link>
          </div>
        </div>
        <div class="a-block">
          <div class="a-about">
            <router-link class="s-font-nav_item s-nav-text" to="/article"><i class="el-icon-share"></i>文章分享
            </router-link>
          </div>
        </div>
        <div class="a-block">
          <div class="a-news">
            <router-link class="s-font-nav_item s-nav-text" to="/learn"><i class="el-icon-s-platform"></i>防诈学习
            </router-link>
          </div>
        </div>
      </div>
      <div class="a-user">
        <el-avatar class="d-icon" icon="el-icon-user-solid"></el-avatar>
        <el-dropdown trigger="click" @command="handleCommand">
          <div v-show="show1" class="d-name">
                <span class="el-dropdown-link">
                   {{ user.name }} <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
            <el-dropdown-menu slot="dropdown" class="d-menu">
              <el-dropdown-item class="d-drop" icon="el-icon-user" command="i">
                <a class="d-text">个人信息</a>
              </el-dropdown-item>
              <el-dropdown-item class="d-drop" icon="el-icon-share" command="s" divided>
                <a class="d-text">我要分享</a>
              </el-dropdown-item>
              <el-dropdown-item class="d-drop" icon="el-icon-help" command="a" divided>
                <a class="d-text">关于我们</a>
              </el-dropdown-item>
              <el-dropdown-item v-show="show3" class="d-drop" icon="el-icon-s-management" command="m" divided>
                <a class="d-text">网站管理</a>
              </el-dropdown-item>
              <el-dropdown-item class="d-drop" icon="el-icon-switch-button" command="o" divided>
                <a class="d-text">退出登录</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </div>
        </el-dropdown>
        <div v-show="show2" class="d-name">
          <router-link class="a-font-nav_item s-nav-text" to="/login"> 立即登录</router-link>
        </div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      show2: true,
      show3: false,
      user: {},
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      /*
      let m = function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
*/
      if (sessionStorage.getItem("user") && this.show1 === false) {
        this.user = JSON.parse(sessionStorage.getItem("user"))
        this.show1 = true
        this.show2 = false
        if (this.user.type !== 0) {
          this.show3 = true
        }
      } else {
        this.show1 = false
        this.show2 = true
        this.show3 = false
      }
    },
    handleCommand(com) {
      if (com === 'i') {
        this.$router.push("/info")
      } else if (com === 'o') {
        this.$confirm('将要退出当前账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.clear();
          this.$message({
            showClose: true,
            type: "success",
            message: "退出登录成功！",
          })
          setTimeout(() => {
            location.reload()
          }, 1000);
        }).catch(() => {
          this.$message({
            showClose: true,
            type: 'info',
            message: '已取消退出登录'
          });
        });
      } else if (com === 's') {
        this.$router.push("/myshare")
      } else if (com === 'm') {
        this.$router.push("/admin/manage")
      } else if (com === 'a') {
        this.$router.push("/about")
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  top: 0;
  min-height: 100%;
  /*
    background:url("assets/bg.png");
    background-size:100% 100%;*/
  background-color: #f3f5f6;
}

#ico {
  width: 162px;
  height: 90px;
}

.a-topBar {
  margin: auto;
  height: 80px;
  background-color: #354e66;
  display: flex;
  /*border-bottom-style:dotted;*/
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  /*position: fixed;*/
}

.a-links {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 100%;
  height: 36px;
  font-size: 18px;
  display: flex;
  justify-content: center;
}

.a-block {
  padding: 7px 20px;
}

.a-user {
  position: absolute;
  height: 40px;
  width: 150px;
  right: 0;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
  transform: translate(0%, 50%);
}

.d-menu {
  margin-top: 25px !important;
}

.d-icon {
}

.d-name {
  padding: 7px 10px;
  color: #f9bf4b;
  font-weight: bold;
  font-size: 18px;
}

.d-drop {
  min-width: 150px;
  font-size: 16px !important;
}

.d-text {
  font-size: 16px;
  text-decoration: none;
  color: #606266;
}

a {
  font-weight: bold;
  text-decoration: none;
  color: #f9bf4b;
}

a.router-link-exact-active {
  font-weight: bold;
  text-decoration: underline;
  color: #f9bf4b;
}
</style>
